<template>
    <div>
        <Table :columns="columns1" :data="data1" class="table" stripe/>
        <div style="text-align: right">
            <router-link to="/core/addRole">
                <Button class="add" icon="plus-round" shape="circle" type="primary" v-has="this.$res.addRole">添加
                </Button>
            </router-link>
        </div>
        <Modal @on-ok="ok" v-model="modal1">
            <Tree :data="data3" multiple ref="tree" show-checkbox/>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "roleList",
        metaInfo: {
            title: '角色列表',
        },
        data() {
            return {
                columns1: [
                    {
                        title: 'id',
                        key: 'id',
                        align: 'center'
                    },
                    {
                        title: '名字',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '角色描述',
                        key: 'content',
                        align: 'center'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'operate',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.authorization(params.row)
                                        }
                                    },
                                    directives: [
                                        {
                                            name: 'has',
                                            value: this.$res.roleAuthorization,
                                        }
                                    ],
                                }, '授权'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id)
                                        }
                                    },
                                    directives: [
                                        {
                                            name: 'has',
                                            value: this.$res.deleteRole,
                                        }
                                    ],
                                }, '删除')
                            ])
                        }
                    }
                ],
                data1: [],
                // 全部菜单与权限信息树状图关系
                data2: [],
                // 权限菜单信息
                data3: [],
                // 设置对话框显示
                modal1: false,
                //全局的角色ID
                roleId: ''
            }
        },
        mounted: function () {
            // 获取数据
            this.getData();
            // 初始化权限与菜单的级联关系
            this.initMenuPermission();
        },
        methods: {
            // 获取所有的角色数据
            getData: function () {
                this.$kit.ajaxGet(this.$res.listRole, {}, (res) => {
                    this.data1 = res.data.data
                }, this)
            },
            // 初始化菜单与权限的树状图关系.
            initMenuPermission: function () {
                let vm = this;
                this.$kit.ajaxGet(this.$res.allMenu, {}, (res => {
                    let data1 = res.data.data;
                    this.$kit.ajaxGet(this.$res.allPermission, {}, (res => {
                        vm.data2 = vm.$kit.permissionTree(data1, res.data.data)
                    }), this)
                }), this)
            },
            // 删除按钮
            remove: function (id) {
                let param = {msg: "角色", id: id, permissionId: this.$res.deleteRole}
                this.$emit("remove", param, () => {
                    this.getData();
                })
            },
            // 授权操作
            authorization: function (row) {
                let vm = this;
                // 记录角色ID
                this.roleId = row.id;
                // 获取角色权限信息并遍历树状图中
                this.$kit.ajaxGet(this.$res.rolePermission, {id: row.id}, (res => {
                    // 将遍历好的树结构数组转为json字符串在转为数组，避免影响原始数组中的树结构，因为是引用类型。修改赋值后的变量会修改原始数组
                    let data = JSON.parse(JSON.stringify(vm.data2));
                    vm.data3 = vm.$kit.rolePermissionTree(data, res.data.data);
                    // 显示弹框
                    vm.modal1 = true;
                }), this)
            },
            ok: function () {
                let menu = [];
                let permission = [];
                // 获取所有选中与半选中的方法节点并遍历出菜单与权限
                this.$refs.tree.getCheckedAndIndeterminateNodes().map(function (item) {
                    if (item.type) {
                        permission.push(item.id)
                    } else {
                        menu.push(item.id)
                    }
                })
                // 请求后台进行授权.
                this.$kit.ajaxJson( this.$res.roleAuthorization, {
                    menuId: menu.join(','),
                    permissionId: permission.join(','),
                    roleId: this.roleId
                }, (res => {
                    this.$Message.success(res.data.msg)
                    this.data3 = []
                }), this)
            },
        },
    }
</script>

<style scoped>
    .add {
        margin: 10px;
    }
</style>
